<!--
 * @Descripttion: 
 * @version: 
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-09-27 18:24:27
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
    <div class="login">
        <el-form class="form" :model="model" :rules="rules" ref="loginForm">
            <h1 class="title">乐柠慢病管理系统</h1>
            <el-form-item prop="userName">
                <el-input class="text" v-model="model.userName" prefix-icon="User" clearable
                    :placeholder="$t('login.username')" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input class="text" v-model="model.password" prefix-icon="Lock" show-password clearable
                    :placeholder="$t('login.password')" />
            </el-form-item>

            <el-form-item prop="captcha">
          <div class="captcha">
              <el-input
                        class="text"
                        v-model="model.captcha"
                        prefix-icon="Picture"
                        placeholder="请输入验证码"
                        ></el-input>
              <img :src="captchaSrc" @click="refreshCaptcha" />
          </div>
      </el-form-item>

            <el-form-item>
                <el-button :loading="loading" type="primary" class="btn" size="large" @click="submit">
                    {{ btnText }}
                </el-button>
            </el-form-item>
        </el-form>
        <div class="change-lang">
            <change-lang />
        </div>
    </div>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    reactive,
    toRefs,
    ref,
    computed,
    onMounted,
    watch,
} from 'vue'
import { Login ,GetValidateCode} from '@/api/login'
import { useRouter, useRoute } from 'vue-router'
import ChangeLang from '@/layout/components/Topbar/ChangeLang.vue'
import useLang from '@/i18n/useLang'
import { useApp } from '@/pinia/modules/app'



export default defineComponent({
    components: { ChangeLang },
    name: 'login',
    setup() {
        const { proxy: ctx } = getCurrentInstance() // 可以把ctx当成vue2中的this
        const router = useRouter()
        const route = useRoute()
        const { lang } = useLang()
        watch(lang, () => {
            state.rules = getRules()
        })
        const getRules = () => ({
            userName: [
                {
                    required: true,
                    message: ctx.$t('login.rules-username'),
                    trigger: 'blur',
                },
            ],
            password: [
                {
                    required: true,
                    message: ctx.$t('login.rules-password'),
                    trigger: 'blur',
                },
                {
                    min: 6,
                    max: 12,
                    message: ctx.$t('login.rules-regpassword'),
                    trigger: 'blur',
                },
            ],
            captcha: [
        {
            required: true,
            message: ctx.$t('login.rules-validate-code'),
            trigger: 'blur',
        },
      ],
        })
 // onMounted钩子函数
 onMounted(() => {
      state.refreshCaptcha()
    })

//     router.beforeEach((to, from, next) => {  
//   // 假设你有一个函数来检查用户是否已登录  
//   const isLoggedIn = checkUserLoginStatus(); // 这里应该是你检查登录状态的方法  
    
//   if (to.path === '/login' && isLoggedIn) {  
//     // 如果用户已登录并且试图访问登录页面，重定向到主页或其他页面  
//     next('/');  
//   } else if (!isLoggedIn && to.path !== '/login') {  
//     // 如果用户未登录并且试图访问非登录页面，重定向到登录页面  
//     next('/login');  
//   } else {  
//     // 否则，继续导航到目标路由  
//     next();  
//   }  
// });


// router.beforeEach((to, from, next) => {  
//   // 假设你有一个方法来检查用户是否已登录  
//   if (!isUserLoggedIn()) {  
//     next('/login'); // 如果未登录，自动导航到登录页面  
//   } else {  
//     next(); // 否则继续导航到目标路由  
//   }  
// });

       // 在某个生命周期钩子或方法中  
       function navigateToOtherPage() {  
      router.push('/other-page');  
    }  
 
    // 如果需要在组件加载时自动跳转，可以调用上面的函数  
    // navigateToOtherPage();  

        const state = reactive({
            model: {
                userName: 'admin',
                password: '111111',
            },
            rules: getRules(),
            loading: false,
            captchaSrc: "" ,
            refreshCaptcha: async () => {
          const { data } = await GetValidateCode() ;
          state.model.codeKey = data.codeKey
          state.captchaSrc = data.codeValue
      },
            btnText: computed(() =>
                state.loading ? ctx.$t('login.logining') : ctx.$t('login.login')
            ),
            loginForm: ref(null),
            submit: () => {
                if (state.loading) {
                    return
                }
                state.loginForm.validate(async valid => {
                    if (valid) {
                        state.loading = true
                        const { code, data, message } = await Login(state.model)
                        if (+code === 200) {
                            ctx.$message.success({
                                message: ctx.$t('login.loginsuccess'),
                                duration: 1000,
                            })

                            const targetPath = decodeURIComponent(route.query.redirect)
                            if (targetPath.startsWith('http')) {
                                // 如果是一个url地址
                                window.location.href = targetPath
                            } else if (targetPath.startsWith('/')) {
                                // 如果是内部路由地址
                                router.push(targetPath)
                            } else {
                                router.push('/')
                            }
                            useApp().initToken(data)
                        } else {
                            ctx.$message.error(message)
                        }
                        state.loading = false
                    }
                })
            },
        })

        return {
            ...toRefs(state),
        }
    },
})
</script>

<style lang="scss" scoped>
.login {
    transition: transform 1s;
    transform: scale(1);
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #2d3a4b;

    .form {
        width: 520px;
        max-width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
        margin: 160px auto 0;

        :deep {
            .el-input__wrapper {
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
                background: rgba(0, 0, 0, 0.1);
            }

            .el-input-group--append>.el-input__wrapper {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .el-input-group--prepend>.el-input__wrapper {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        .title {
            color: #fff;
            text-align: center;
            font-size: 36px;
            margin: 0 0 24px;
            font-family: STCaiyun;
        }

        .text {
            font-size: 16px;

            :deep(.el-input__inner) {
                color: #fff;
                height: 48px;
                line-height: 48px;

                &::placeholder {
                    color: rgba(255, 255, 255, 0.2);
                }
            }
        }

        .btn {
            width: 100%;
        }
    }
}

.change-lang {
    position: fixed;
    right: 20px;
    top: 20px;

    :deep {
        .change-lang {
            height: 24px;

            &:hover {
                background: none;
            }

            .icon {
                color: #fff;
            }
        }
    }
}
</style>
